@use 'var' as *;

:root {
  /* 基础颜色变量 */
  --theme-color-primary-light: #{$primary-color-light};
  --theme-color-primary-dark: #{$primary-color-dark};
  --theme-text-color-light: #{$text-color-light};
  --theme-text-color-dark: #{$text-color-dark};
  --theme-bg-color-light: #{$bg-color-light};
  --theme-bg-color-dark: #{$bg-color-dark};
  --theme-menu-bg-light: #{$menu-bg-light};
  --theme-menu-bg-dark: #{$menu-bg-dark};
  --theme-module-bg-light: #{$module-bg-light};
  --theme-module-bg-dark: #{$module-bg-dark};
  --theme-sidebar-header-bb-color: #{$sidebar-header-border-bottom-color};

  /* 主题变量映射 */
  --theme-color-primary: var(--theme-color-primary-light);
  --theme-text-color: var(--theme-text-color-light);
  --theme-bg-color: var(--theme-bg-color-light);
  --theme-menu-bg: var(--theme-menu-bg-light);
  --theme-module-bg: var(--theme-module-bg-light);
  --theme-border-color: rgba(226, 226, 238, 1);
  --theme-header-bg: var(--theme-module-bg);
  --theme-query-form-label-color: #{$query-form-label-color};
  --theme-table-header-bg-color: #{$table-header-bg-color};
  --theme-table-tr-color: #{$table-body-tr-bg-color};
  --theme-table-tr-hover-color: #{$table-body-tr-hover-color};
  --theme-element-bg: #{$element-bg-light};
  --pagination-border-color: #{$pagination-border-color-light};
  --select-bg-color: #{$selection-bg-light};
  --element-input-border-color: #{$element-input-border-color-light};
  --pagination-item-active-bg-color: #{$pagination-item-active-bg-color-light};
  --select-placeholder-color: #{$select-placeholder-color-light};
  --breadcrumb-item-color: #{$breadcrumb-item-color-light};
  --input-bg-color: #{$input-bg-color-light};
  --form-input-border-color: #{$form-input-border-color-light};
  --date-bg-color: #{$date-bg-color-light};
}

:root[data-theme='dark'] {
  --theme-color-primary: var(--theme-color-primary-dark);
  --theme-text-color: var(--theme-text-color-dark);
  --theme-bg-color: var(--theme-bg-color-dark);
  --theme-menu-bg: var(--theme-menu-bg-dark);
  --theme-module-bg: var(--theme-module-bg-dark);
  --theme-border-color: rgba(255, 255, 255, 0.1);
  --theme-header-bg: var(--theme-module-bg);
  --theme-sidebar-header-bb-color: #{$sidebar-header-border-bottom-color-dark};
  --theme-query-form-label-color: #{$query-form-label-color-dark};
  --theme-table-header-bg-color: #{$table-header-bg-color-dark};
  --theme-table-tr-color: #{$table-body-tr-bg-color-dark};
  --theme-table-tr-hover-color: #{$table-body-tr-hover-color-dark};
  --theme-element-bg: #{$element-bg-dark};
  --pagination-border-color: rgba(255, 255, 255, 0.1);
  --select-bg-color: #{$selection-bg-dark};
  --element-input-border-color: #{$element-input-border-color-dark};
  --pagination-item-active-bg-color: #{$pagination-item-active-bg-color-dark};
  --select-placeholder-color: #{$select-placeholder-color-dark};
  --breadcrumb-item-color: #{$breadcrumb-item-color-dark};
  --input-bg-color: #{$input-bg-color-dark};
  --form-input-border-color: #{$form-input-border-color-dark};
  --date-bg-color: #{$date-bg-color-dark};
}
// 基础圆角变量
:root {
  --theme-border-radius: 0;
  --theme-font-size-header: 14px;
  --theme-font-size-body: 12px;
}

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'PingFang SC', 'Microsoft YaHei', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--theme-bg-color);
  color: var(--theme-text-color);
}

#app {
  height: 100%;
  width: 100%;
  background-color: var(--theme-bg-color);
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Element Plus 样式覆盖 */
.el-button,
.el-pager li {
  border-radius: var(--theme-border-radius);
}

.toolbar {
  border-top: 1px solid var(--theme-border-color);
}
.el-form-item--label-right .el-form-item__label {
  color: var(--theme-query-form-label-color);
}
.theme-header-row th {
  background-color: var(--theme-table-header-bg-color);
  color: var(--theme-text-color);
}
.el-menu--popup {
  .el-menu-item:hover {
    background-color: var(--theme-menu-bg);
    color: var(--theme-color-primary);
  }
}
.el-popper.is-light {
  border: none;
  outline: none;
}
.base-table .el-table td.el-table__cell {
  font-size: 12px;
}
.el-pagination.is-background .el-pager li {
  color: var(--theme-text-color);
  background-color: var(--theme-element-bg) !important;
}
.el-pagination.is-background .el-pager li.is-active {
  background-color: var(--pagination-item-active-bg-color) !important;
}
.el-pagination > .is-first,
.el-pagination > .is-last {
  color: var(--theme-text-color);
}
.el-select__wrapper {
  background-color: var(--theme-element-bg) !important;
  border-radius: 0 !important;
  // box-shadow: none !important;
}
.el-pagination .el-select__wrapper {
  box-shadow: none !important;
}
.el-pagination .el-select {
  border: 1px solid var(--pagination-border-color);
  border-radius: 0 !important;
}
.el-select__placeholder {
  color: var(--theme-text-color) !important;
}
.el-pagination.el-select__wrapper.is-focused {
  box-shadow: none !important;
}
.el-select-dropdown__list {
  background-color: var(--theme-element-bg) !important;
}
.el-select__popper.el-popper {
  border: none !important;
}
.el-select-dropdown__item.is-selected {
  background-color: var(--select-bg-color) !important;
}
.el-pagination .el-select__wrapper.is-hovering:not(.is-focused) {
  box-shadow: none !important;
}
.el-select-dropdown__item.is-hovering {
  background-color: var(--select-bg-color) !important;
}
.el-select-dropdown__item {
  color: var(--theme-text-color) !important;
}
.el-pagination .el-select-dropdown__item.is-selected {
  color: var(--theme-color-primary) !important;
}
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .btn-next:disabled {
  background-color: var(--theme-element-bg) !important;
  color: var(--theme-text-color) !important;
}
.el-input__wrapper {
  background-color: var(--theme-element-bg) !important;
  border-radius: 1px solid var(--theme-border-color) !important;
}
.el-input__inner {
  color: var(--theme-text-color) !important;
  border: none !important;
}
.el-pagination__jump .el-input__wrapper {
  box-shadow: none !important;
}
.el-pagination .el-input__inner {
  border: 1px solid var(--element-input-border-color) !important;
}

.el-table__inner-wrapper:before,
.el-table__inner-wrapper:before {
  background-color: var(--theme-border-color) !important;
}
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid var(--theme-border-color) !important;
  border-top: 1px solid var(--theme-border-color) !important;
}
.el-table thead {
  border-top: 1px solid var(--theme-border-color) !important;
}
.base-table .theme-header-row th .cell {
  border-right: 1px solid var(--theme-border-color) !important;
}
.el-select__placeholder.is-transparent {
  color: var(--select-placeholder-color) !important;
}
.el-select__wrapper,
.el-input__wrapper,
.el-date-editor .el-range-input {
  background-color: var(--input-bg-color) !important;
}
.el-date-editor .el-range-separator {
  color: var(--select-placeholder-color) !important;
}
.el-date-range-picker .el-picker-panel__body {
  background-color: var(--input-bg-color);
}
.el-picker__popper.el-popper,
.el-date-range-picker__content.is-left {
  border: none !important;
}
.el-date-table th,
.el-date-range-picker__header-label,
.el-date-table td .el-date-table-cell .el-date-table-cell__text {
  color: var(--theme-text-color) !important;
}
.el-date-table td.in-range .el-date-table-cell {
  background-color: var(--date-bg-color) !important;
}
.el-button {
  border-radius: 0 !important;
}
.el-button--primary {
  background-color: var(--theme-color-primary) !important;
}
.el-button--primary.is-link {
  background-color: transparent !important;
}
.el-pagination.is-background .btn-next.is-active,
.el-pagination.is-background .btn-prev.is-active,
.el-pagination.is-background .el-pager li.is-active {
  border-radius: 0;
}
.el-table--default .el-table__cell {
  padding: 5px 0 !important;
}
